<template>
  <div>
    <Row>
      <Col span="6" push="18" style="margin-bottom: 12px;">
        <Input search enter-button clearable placeholder="Enter something..." @on-search="handleSearch" />
      </Col>
      <Col span="24">
        <Table :columns="columns" :data="data" border highlight-row @on-current-change="handleCurrent">
          <template slot-scope="{ row }" slot="title">
            <div>
              <span v-if="!row.isEdit">{{ row.title }}</span>
              <Input v-else v-model="data[row._index].title"></Input>
            </div>
          </template>
          <template slot-scope="{ row }" slot="manufacturer">
            <div>
              <span v-if="!row.isEdit">{{ row.manufacturer }}</span>
              <Input v-else v-model="data[row._index].manufacturer"></Input>
            </div>
          </template>
          <template slot-scope="{ row }" slot="price">
            <div>
              <span v-if="!row.isEdit">{{ row.price }}</span>
              <Input v-else v-model="data[row._index].price"></Input>
            </div>
          </template>
          <template slot-scope="{ row }" slot="action">
            <div>
              <Button v-if="!row.isEdit" @click="handleEdit(row)">编辑</Button>
              <div v-else class="btns">
                <Button type="success" @click="handlesave(row)">保存</Button>
                <Button type="error" @click="handledelete(row)">删除</Button>
                <Button type="warning" @click="handleCancel(row)">取消</Button>
              </div>
            </div>
          </template>
        </Table>
      </Col>
    </Row>
    <br />
    <Row type="flex" justify="center">
      <Col>
        <Page :current="params.page" :total="total" :page-size="params.pageSize" @on-change="onPageChange" @on-page-size-change="onPageSizeChange" show-sizer />
      </Col>
    </Row>
  </div>
</template>

<script>
import productApi from '@/api/product'
export default {
  name: 'apiTest',
  data() {
    return {
      columns: [
        {
          title: '商品名称',
          slot: 'title',
          align: 'center'
        },
        {
          title: '生产商',
          slot: 'manufacturer',
          align: 'center'
        },
        {
          title: '价格',
          slot: 'price',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'createdTime',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      data: [],
      total: 0,
      params: {
        page: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 搜索
    handleSearch(val) {
      Object.assign(this.params, { keyword: val, page: 1 })
      this.getList()
    },
    // 获取列表
    async getList() {
      let params = this.params
      try {
        const res = await productApi.getProducts(params)
        let { code, data } = res
        if (code === 'request_ok') {
          let { products, total } = data
          this.data = products.map(item => {
            return {
              ...item,
              isEdit: false
            }
          })
          this.total = total
        }
      } catch (error) {
        console.error(error)
      }
    },
    // 分页回调
    onPageChange(page) {
      Object.assign(this.params, { page })
      this.getList()
    },
    onPageSizeChange(pageSize) {
      Object.assign(this.params, { page: 1, pageSize })
      this.getList()
    },
    // 编辑
    handleEdit(row) {
      // 阻止冒泡事件
      window.event ? (window.event.cancelBubble = true) : e.stopPropagation()
      console.log(row)
      Object.assign(this.data[row._index], { isEdit: true })
    },
    // 更新
    handlesave(row) {
      // 阻止冒泡事件
      window.event ? (window.event.cancelBubble = true) : e.stopPropagation()
      let that = this
      let { _index, _rowKey, isEdit, ...params } = row
      this.$Modal.confirm({
        title: '是否确定保存？',
        async onOk() {
          try {
            const res = await productApi.updateProduct(params)
            if (res.code === 'request_ok') {
              this.$Message.success('保存成功')
              that.getList()
            } else {
              this.$Message.error('保存失败')
            }
          } catch (error) {
            console.error(error)
          }
        }
      })
    },
    // 删除
    handledelete(row) {
      // 阻止冒泡事件
      window.event ? (window.event.cancelBubble = true) : e.stopPropagation()
      const that = this
      let { id } = row
      this.$Modal.confirm({
        title: '是否删除？',
        async onOk() {
          try {
            const res = await productApi.deleteProduct(id)
            if (res.code === 'request_ok') {
              this.$Message.success('删除成功')
              that.getList()
            } else {
              this.$Message.error('删除失败')
            }
          } catch (error) {
            console.error(error)
          }
        }
      })
    },
    // 取消
    handleCancel(row) {
      // 阻止冒泡事件
      window.event ? (window.event.cancelBubble = true) : e.stopPropagation()
      Object.assign(this.data[row._index], { isEdit: false })
    },
    // 查询当前产品详情
    async handleCurrent(row) {
      let { id } = row
      try {
        // const res = await productApi.getProduct(id)
        // console.log(res)
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

<style scoped>
.btns button {
  margin-right: 10px;
}
</style>
